<template>
  <div id="stl-container">
    <div id="stl-param">
      <el-form :model="form" :inline="true">
        <el-form-item label="平移">
          <el-input v-model="form.position.x"></el-input>
          <el-input v-model="form.position.y"></el-input>
          <el-input v-model="form.position.z"></el-input>
        </el-form-item>
        <el-form-item label="四元数">
          <el-input v-model="form.quaternion.x"></el-input>
          <el-input v-model="form.quaternion.y"></el-input>
          <el-input v-model="form.quaternion.z"></el-input>
          <el-input v-model="form.quaternion.w"></el-input>
        </el-form-item>
        <el-form-item label="缩放">
          <el-input v-model="form.scale.x"></el-input>
          <el-input v-model="form.scale.y"></el-input>
          <el-input v-model="form.scale.z"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">生效</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="stl-canvas"></div>
  </div>
</template>

<script>
  import * as THREE from 'three'
  import OrbitControls from 'threejs-orbit-controls'
  //import STLLoader from 'three-stl-loader'
  var STLLoader = require('three-stl-loader')(THREE)

  export default {
    name: "STL3D",
    data() {
      return {
        stl3D: null,
        form: {
          position: {
            x: 0,
            y: 0,
            z: 0,
          },
          quaternion: {
            x: 0,
            y: 0,
            z: 0,
            w: 0
          },
          scale: {
            x: 1,
            y: 1,
            z: 1
          }
        }

      }
    },
    methods: {
      onSubmit() {
        var martix4 = new THREE.Matrix4(
        )
        var position = new THREE.Vector3(this.form.position.x, this.form.position.y, this.form.position.z)
        var quaternion = new THREE.Quaternion(this.form.quaternion.x, this.form.quaternion.y, this.form.quaternion.z, this.form.quaternion.w)
        var scale = new THREE.Vector3(this.form.scale.x, this.form.scale.y, this.form.scale.z)
        martix4.compose(position, quaternion, scale)
        this.stl3D.applyMatrix(martix4)
      }
    },
    mounted() {
      let scene = new THREE.Scene();
      scene.background = new THREE.Color(0xf0f0f0)
      var axes = new THREE.AxesHelper(100)
      scene.add(axes)
      var camera = new THREE.PerspectiveCamera(150, window.innerWidth / window.innerHeight, 0.1, 10000);
      var controls = new OrbitControls(camera, document.getElementById('stl-canvas'));
      //  var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );
      var raycaster = new THREE.Raycaster();
      var mouse = new THREE.Vector2();

      var renderer = new THREE.WebGLRenderer({antialias: true});


      renderer.setSize(4 * window.innerWidth / 5, window.innerHeight);
      document.getElementById('stl-canvas').appendChild(renderer.domElement)
      let loader = new STLLoader()
      console.log(loader)
      const _this = this
      loader.load('/static/ttt.stl', function (geometry) {
        var material = new THREE.MeshNormalMaterial()
        _this.stl3D = new THREE.Mesh(geometry, material)
        scene.add(_this.stl3D)
      })


      var ambientLight = new THREE.AmbientLight(0xcccccc);
      scene.add(ambientLight);

      var pointLight = new THREE.PointLight(0xcccccc);
      pointLight.position.set(20, 10, 150);
      scene.add(pointLight);
      var hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1)
      scene.add(hemisphereLight)
      camera.position.set(20, 10, 150);
      controls.update();


      var animate = function () {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
      };

      function onMouseMove(event) {
        event.preventDefault();
        mouse.x = ((event.clientX - renderer.domElement.getBoundingClientRect().left) / renderer.domElement.offsetWidth) * 2 - 1;
        mouse.y = -((event.clientY - renderer.domElement.getBoundingClientRect().top) / renderer.domElement.offsetHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);

        // 计算物体和射线的焦点
        let intersects = raycaster.intersectObjects(scene.children, true);
        for (var i = 0; i < intersects.length; i++) {
          intersects[i].object.material.color.set(0x6699ff);
        }
      }

      requestAnimationFrame(animate)
      window.addEventListener('click', onMouseMove, false);

    }
  }
</script>

<style scoped>
  .el-form-item__content {
    display: flex;
  }

  input {
    width: 20px;
  }
</style>
